import React from "react";
import logoImage from "../../data/logo.png";
import { UserOutlined, SafetyOutlined } from "@ant-design/icons";
import { Button, Form, Input, Row, Col, Divider } from "antd";
import { useTranslation } from "react-i18next";
import style from "./forgetpassword.module.scss";

export default function ForgetPassWord(props) {
  const { t } = useTranslation();
  const { setFormNavigation } = props;
  return (
    <div className={style.ForgetPassWordBox}>
      <div className={style.imageBox}>
        <img src={logoImage} alt="" />
      </div>
      <div className={style.ForgetPassWordForm}>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
        >
          <Form.Item name="username">
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder={t("login.LoginAccount")}
            />
          </Form.Item>

          <Form.Item style={{ marginBottom: "0px" }}>
            <Row gutter={(10, 10)}>
              <Col span={15}>
                <Form.Item name="captcha">
                  <Input
                    prefix={<SafetyOutlined className="site-form-item-icon" />}
                    placeholder={t("login.VerificationCode")}
                  />
                </Form.Item>
              </Col>
              <Col span={8}>
                <div className={style.forgetpasswordVerify}>
                  <Button
                    onClick={() => {
                      console.log(1);
                    }}
                  >
                    <img src={logoImage} alt="" />
                  </Button>
                </div>
              </Col>
            </Row>
          </Form.Item>

          <Button
            style={{ width: "100%" }}
            type="primary"
            onClick={() => {
              setFormNavigation("3");
            }}
          >
            {t("login.nextStep")}
          </Button>
        </Form>

        <p className={style.forgetformantbut}>
          <Button
            type="link"
            style={{ paddingLeft: "0px" }}
            onClick={() => {
              setFormNavigation("1");
            }}
            block
          >
            {t("login.ReturnToLogin")}
          </Button>
        </p>

        <div className={style.formfooter}>
          <a
            href="https://www.allinpayintl.com/ch-zh/us.html"
            style={{ color: "rgb(69 73 79 / 42%)" }}
          >
            {t("login.aboutTonghua")}
          </a>
          <Divider type="vertical" />
          <a
            href="https://www.allinpayintl.com/ch-zh/contact.html"
            style={{ color: "rgb(69 73 79 / 42%)" }}
          >
            {t("login.contactUs")}
          </a>
        </div>
      </div>
    </div>
  );
}
